/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

    // Initialisation de variables globales au script

    // Initialisation des indicateurs de bonnes réponses à donner pour chaque environnement
    var nb_bonnes_reponses_e1 = 2;
    var nb_bonnes_reponses_e2 = 2;
    var nb_bonnes_reponses_e3 = 3;
    var nb_bonnes_reponses_e4 = 3;
    

    // Initialisation de l'indicateur d'environnement (ou niveau) dans lequel se trouve l'utilisateur
    // Au début : environnement/niveau 1
    // Cette variable est mise à jour au moment du changement d'environnement, lors de l'appel AJAX
    var environment = 1;

    // Initialisation des variables utilisées pour gérer le compteur de temps
    var timer_width = 0;
    var animating = false;


    // Au lancement de l'environnement 1 du jeu 1
    $(document).ready(function(){
        // Fonction permettant de continuer à bénéficier des propriétés JQuery écrites dans ce script malgré un rechargement AJAX des nouveaux environnements
        load_jquery_properties();
    });
    
    // Fonction permettant de continuer à bénéficier des propriétés JQuery écrites dans ce script malgré un rechargement AJAX des nouveaux environnements
    function load_jquery_properties(){

        // Gestion du compteur de temps
        animating = false;
        // Fonction exécutée à intervales de temps réguliers
        window.setInterval(function() {

            if(animating == false){
                // Si la taille a atteint son maximum
                if(timer_width < 450){

                    animating = true;
                    if(timer_width < 150){
                        $('#timing').css('background-color','#00FF00');
                    }
                    if((timer_width > 150) && (timer_width < 300)){
                        $('#timing').css('background-color','#FF6600');
                    }
                    if(timer_width > 300){
                        $('#timing').css('background-color','#FF0000');
                    }

                    $('#timing').animate({
                        width: "+=5px"
                        //$('#timing').delay(200).fadeIn('slow');delay(200)
                    }, 400, function(){
                        animating = false;
                    });
                    timer_width = timer_width+5;
                }
            }

        }, 400);


        // Initialisation de l'indicateur du nombre de bonnes réponses données par l'utilisateur
        var nb_bonnes_reponses_user = 0;
        var nb_bonnes_reponses_environment = 0;
        
        // On mémorise le nombre de bonnes réponses à donner en fonction de l'environnement
        switch(environment){
            case 1:
                nb_bonnes_reponses_environment = nb_bonnes_reponses_e1;
            break;
            case 2:
                nb_bonnes_reponses_environment = nb_bonnes_reponses_e2;
            break;
            case 3:
                nb_bonnes_reponses_environment = nb_bonnes_reponses_e3;
            break;
            case 4:
                nb_bonnes_reponses_environment = nb_bonnes_reponses_e4;
            break;
        }
        

        // Initialisation de variables devant stocker temporairement les données d'un objet en train d'être déplacé :
        // - son id
        var id_tmp = '';
        // - ses coordonnées
        var top_tmp = 0;
        var left_tmp = 0;

        // On charge l'écran en fondu
        $('#content').fadeIn(1000);

        // On rend draggable les items
        $('.item_draggable').draggable({disabled: false, containment:'window' });

        // Au clic sur le bouton 'replay', on recharge la page pour recommencer le jeu
        $('#btn_replay').click(function(){
            $('#content').css('display', 'none');
            location.reload();
        });
        
        
        
        // Gestion des événements de dépose d'items sur les emplacements
        
        // Au clic sur un élément, mémorisation de l'id et des coordonnées de l'élément en train d'être déplacé
        // On change également le curseur Pixou
        // Environnement 1
        if(environment == 1){
            $('#item_1_1').mousedown(function(){
                id_tmp = 'item_1_1';
                left_tmp = $('#item_1_1').offset().left;
                top_tmp = $('#item_1_1').offset().top;
                $(this).css('cursor','url(../../assets/images/commun/commun_mouse_onclick.png), auto');
            });
            $('#item_1_2').mousedown(function(){
                id_tmp = 'item_1_2';
                left_tmp = $('#item_1_2').offset().left;
                top_tmp = $('#item_1_2').offset().top;
                $(this).css('cursor','url(../../assets/images/commun/commun_mouse_onclick.png), auto');
            });
            $('#item_1_3').mousedown(function(){
                id_tmp = 'item_1_3';
                left_tmp = $('#item_1_3').offset().left;
                top_tmp = $('#item_1_3').offset().top;
                $(this).css('cursor','url(../../assets/images/commun/commun_mouse_onclick.png), auto');
            });
        }

        // Environnement 2
        if(environment == 2){
            // Environnement 2
            $('#item_2_1').mousedown(function(){
                id_tmp = 'item_2_1';
                left_tmp = $('#item_2_1').offset().left;
                top_tmp = $('#item_2_1').offset().top;
                $(this).css('cursor','url(../../assets/images/commun/commun_mouse_onclick.png), auto');
            });
            $('#item_2_2').mousedown(function(){
                id_tmp = 'item_2_2';
                left_tmp = $('#item_2_2').offset().left;
                top_tmp = $('#item_2_2').offset().top;
                $(this).css('cursor','url(../../assets/images/commun/commun_mouse_onclick.png), auto');
            });
            $('#item_2_3').mousedown(function(){
                id_tmp = 'item_2_3';
                left_tmp = $('#item_2_3').offset().left;
                top_tmp = $('#item_2_3').offset().top;
                $(this).css('cursor','url(../../assets/images/commun/commun_mouse_onclick.png), auto');
            });
            $('#item_2_4').mousedown(function(){
                id_tmp = 'item_2_4';
                left_tmp = $('#item_2_4').offset().left;
                top_tmp = $('#item_2_4').offset().top;
                $(this).css('cursor','url(../../assets/images/commun/commun_mouse_onclick.png), auto');
            });
        }
        
        // Environnement 3
        if(environment == 3){
           // Environnement 3
            $('#item_3_1').mousedown(function(){
                id_tmp = 'item_3_1';
                left_tmp = $('#item_3_1').offset().left;
                top_tmp = $('#item_3_1').offset().top;
                $(this).css('cursor','url(../../assets/images/commun/commun_mouse_onclick.png), auto');
            });
            $('#item_3_2').mousedown(function(){
                id_tmp = 'item_3_2';
                left_tmp = $('#item_3_2').offset().left;
                top_tmp = $('#item_3_2').offset().top;
                $(this).css('cursor','url(../../assets/images/commun/commun_mouse_onclick.png), auto');
            });
            $('#item_3_3').mousedown(function(){
                id_tmp = 'item_3_3';
                left_tmp = $('#item_3_3').offset().left;
                top_tmp = $('#item_3_3').offset().top;
                $(this).css('cursor','url(../../assets/images/commun/commun_mouse_onclick.png), auto');
            });
            $('#item_3_4').mousedown(function(){
                id_tmp = 'item_3_4';
                left_tmp = $('#item_3_4').offset().left;
                top_tmp = $('#item_3_4').offset().top;
                $(this).css('cursor','url(../../assets/images/commun/commun_mouse_onclick.png), auto');
            });
        }
        
        // Environnement 4
        if(environment == 4){
              // Environnement 4
            $('#item_4_1').mousedown(function(){
                id_tmp = 'item_4_1';
                left_tmp = $('#item_4_1').offset().left;
                top_tmp = $('#item_4_1').offset().top;
                $(this).css('cursor','url(../../assets/images/commun/commun_mouse_onclick.png), auto');
            });
            $('#item_4_2').mousedown(function(){
                id_tmp = 'item_4_2';
                left_tmp = $('#item_4_2').offset().left;
                top_tmp = $('#item_4_2').offset().top;
                $(this).css('cursor','url(../../assets/images/commun/commun_mouse_onclick.png), auto');
            });
            $('#item_4_3').mousedown(function(){
                id_tmp = 'item_4_3';
                left_tmp = $('#item_4_3').offset().left;
                top_tmp = $('#item_4_3').offset().top;
                $(this).css('cursor','url(../../assets/images/commun/commun_mouse_onclick.png), auto');
            });
            $('#item_4_4').mousedown(function(){
                id_tmp = 'item_4_4';
                left_tmp = $('#item_4_4').offset().left;
                top_tmp = $('#item_4_4').offset().top;
                $(this).css('cursor','url(../../assets/images/commun/commun_mouse_onclick.png), auto');
            });
            $('#item_4_5').mousedown(function(){
                id_tmp = 'item_4_5';
                left_tmp = $('#item_4_5').offset().left;
                top_tmp = $('#item_4_5').offset().top;
                $(this).css('cursor','url(../../assets/images/commun/commun_mouse_onclick.png), auto');
            });
        }

// On change le curseur au survol d'un item
        $(".item_draggable").hover(
            function () {
                $(this).css('cursor','url(../../assets/images/commun/commun_mouse_hover.png), auto');
            
            },
            // Lorsqu'on ne survole plus l'item, on retrouve le curseur classique
            function () {
                $(this).css('cursor','url(../../assets/images/commun/commun_mouse.png), auto');
            }
        );

        // Traitement lorsque l'on relache la souris
        $('.item_draggable').mouseup(function(){
            
            

            // On détecte si l'objet est déposé au bon emplacement par appel de la fonction "detectIntersection"
            var success = detectIntersection(id_tmp, 'empl_'+id_tmp);

            // Si l'item est déposé au bon emplacement
            if(success){
                // 1. Dépose de l'item à l'emplacement associé en le remplaçant par son image dans l'emplacement (plus petite que l'actuelle)
                // Récupération des coordonnées de l'emplacement de l'item
                var placement_left = $('#empl_'+id_tmp).offset().left;
                var placement_top = $('#empl_'+id_tmp).offset().top;

                // Récupération des coordonnées de dépose de l'item
                var current_left = $('#'+id_tmp).offset().left;
                var current_top = $('#'+id_tmp).offset().top;

                // On calcule le déplacement à faire pour positionner précisément l'item
                var place_left = placement_left - current_left;
                var place_top = placement_top - current_top;

                // Fixation des items, si bien placés, ils ne peuvent plus être déplacés.
                $('#'+id_tmp).draggable({disabled: true});
                $('#'+id_tmp).removeClass('item_draggable');
                
                
                
                /* Placement des items en fonction de l'environnement */
                switch(environment){
                    
                    // Pour l'environnement 1
                    case 1:
                        // S'il s'agit de l'item_1_1 <=> lion
                        if($("#"+id_tmp).attr("id") == "item_1_1"){
                            // Changement de la bonne image devant être placée (plus petite que l'actuelle)
                            $("#"+id_tmp).css("background-image", "url('../../assets/images/game1/environnement1/j1e1_lion_place.png')");
                            // Redimensionnement css du div contenant l'image à la bonne taille, pour éviter les débordements
                            $("#"+id_tmp).css("height", "119px");
                            $("#"+id_tmp).css("width", "82px");
                        }

                        // S'il s'agit de l'item_1_3 <=> dessin
                        if($("#"+id_tmp).attr("id") == "item_1_3"){
                            // Changement de la bonne image devant être placée (plus petite que l'actuelle)
                            $("#"+id_tmp).css("background-image", "url('../../assets/images/game1/environnement1/j1e1_dessin_place.png')");
                            // Redimensionnement css du div contenant l'image à la bonne taille, pour éviter les débordements
                            $("#"+id_tmp).css("height", "95px");
                            $("#"+id_tmp).css("width", "116px");
                        }
                    break;
                    
                    // Pour l'environnement 2
                    case 2:
                        // S'il s'agit de l'item_2_1 <=> sac
                        if($("#"+id_tmp).attr("id") == "item_2_1"){
                            // Changement de la bonne image devant être placée (plus petite que l'actuelle)
                            $("#"+id_tmp).css("background-image", "url('../../assets/images/game1/environnement2/j1e2_sac_place.png')");
                            // Redimensionnement css du div contenant l'image à la bonne taille, pour éviter les débordements
                            $("#"+id_tmp).css("height", "119px");
                            $("#"+id_tmp).css("width", "102px");
                        }

                        // S'il s'agit de l'item_2_4 <=> chocapic
                        if($("#"+id_tmp).attr("id") == "item_2_4"){
                            // Changement de la bonne image devant être placée (plus petite que l'actuelle)
                            $("#"+id_tmp).css("background-image", "url('../../assets/images/game1/environnement2/j1e2_chocapic_place.png')");
                            // Redimensionnement css du div contenant l'image à la bonne taille, pour éviter les débordements
                            $("#"+id_tmp).css("height", "81px");
                            $("#"+id_tmp).css("width", "51px");
                        }

                    break;

                    // Pour l'environnement 3
                    case 3:
                        // S'il s'agit de l'item_3_1 <=> panneau
                        if($("#"+id_tmp).attr("id") == "item_3_1"){
                            // Changement de la bonne image devant être placée (plus petite que l'actuelle)
                            $("#"+id_tmp).css("background-image", "url('../../assets/images/game1/environnement3/j1e3_pub_place.png')");
                            // Redimensionnement css du div contenant l'image à la bonne taille, pour éviter les débordements
                            $("#"+id_tmp).css("height", "152px");
                            $("#"+id_tmp).css("width", "82px");
                        }

                        // S'il s'agit de l'item_3_2 <=> plot
                        if($("#"+id_tmp).attr("id") == "item_3_2"){
                            // Changement de la bonne image devant être placée (plus petite que l'actuelle)
                            $("#"+id_tmp).css("background-image", "url('../../assets/images/game1/environnement3/j1e3_plot_place.png')");
                            // Redimensionnement css du div contenant l'image à la bonne taille, pour éviter les débordements
                            $("#"+id_tmp).css("height", "81px");
                            $("#"+id_tmp).css("width", "74px");
                        }
                        
                        // S'il s'agit de l'item_3_4 <=> sens interdit
                        if($("#"+id_tmp).attr("id") == "item_3_4"){
                            // Changement de la bonne image devant être placée (plus petite que l'actuelle)
                            $("#"+id_tmp).css("background-image", "url('../../assets/images/game1/environnement3/j1e3_sens_interdit_place.png')");
                            // Redimensionnement css du div contenant l'image à la bonne taille, pour éviter les débordements
                            $("#"+id_tmp).css("height", "63px");
                            $("#"+id_tmp).css("width", "63px");
                        }
                    break;

                    // Pour l'environnement 4
                    case 4:
                          // S'il s'agit de l'item_4_1 <=> collage
                        if($("#"+id_tmp).attr("id") == "item_4_1"){
                            // Changement de la bonne image devant être placée (plus petite que l'actuelle)
                            $("#"+id_tmp).css("background-image", "url('../../assets/images/game1/environnement4/j1e4_collage_place.png')");
                            // Redimensionnement css du div contenant l'image à la bonne taille, pour éviter les débordements
                            $("#"+id_tmp).css("height", "90px");
                            $("#"+id_tmp).css("width", "103px");
                        }

                        // S'il s'agit de l'item_4_3 <=> alphabet
                        if($("#"+id_tmp).attr("id") == "item_4_3"){
                            // Changement de la bonne image devant être placée (plus petite que l'actuelle)
                            $("#"+id_tmp).css("background-image", "url('../../assets/images/game1/environnement4/j1e4_alphabet_place.png')");
                            // Redimensionnement css du div contenant l'image à la bonne taille, pour éviter les débordements
                            $("#"+id_tmp).css("height", "73px");
                            $("#"+id_tmp).css("width", "122px");
                        }
                        
                        // S'il s'agit de l'item_4_4 <=> globe
                        if($("#"+id_tmp).attr("id") == "item_4_4"){
                            // Changement de la bonne image devant être placée (plus petite que l'actuelle)
                            $("#"+id_tmp).css("background-image", "url('../../assets/images/game1/environnement4/j1e4_globe_place.png')");
                            // Redimensionnement css du div contenant l'image à la bonne taille, pour éviter les débordements
                            $("#"+id_tmp).css("height", "93px");
                            $("#"+id_tmp).css("width", "75px");
                        }
                    break;
                }

                // On fait disparaitre le fond de l'emplacement associé
                $("#empl_"+id_tmp).fadeOut(500);

                // On place l'image au bon emplacement et on lance une fonction pour finaliser le traitement
                $("#"+id_tmp).animate({"left": "+="+place_left+"px", "top": "+="+place_top+"px"}, "slow", function() {

                    // 2. Incrémentation de l'indice mémorisant les bonnes réponses de l'utilisateur
                    nb_bonnes_reponses_user++;
                    $("#"+id_tmp).draggable({ disabled: true });
                    $("#"+id_tmp).removeClass("item_draggable");

                    // 3. Décrémentation de la jauge de temps
                    animating = true;
                    if(timer_width-30 < 0){
                        var tmp = timer_width-30;
                        tmp = 30 + tmp;
                        $('#timing').animate({
                            width: "-="+tmp+"px"
                        }, 100, function(){
                            timer_width = 0;
                            animating = false;
                        });
                    }
                    else{
                        $('#timing').animate({
                            width: "-=30px"
                        }, 100, function(){
                            timer_width = timer_width-30;
                            animating = false;
                        });
                    }

                    // 4. Si le nombre de bonnes réponses est atteint
                    if(nb_bonnes_reponses_user == nb_bonnes_reponses_environment){
                        // Lancement d'une mini-animation de transition'
                        // .../... RAF, intégration d'un petit son de succès...
                        animating = true;

                        // Incrémentation de l'indicateur d'environnement/niveau
                        environment++;

                        // Si on a fini l'environnement 4, le jeu est terminé
                        if(environment > 4){
                            
                            $('#zone_interaction').animate({
                                opacity: "-=0.3"
                            });
                            $('#zone_basse').animate({
                                opacity: "-=0.3"
                            });
                            $('#end_game').fadeIn(800,function(){
                                $('#zone_interaction').delay(500).fadeOut(1000);
                                $(this).delay(500).fadeOut(1000);
                            });

                            $('#zone_basse').delay(1500).fadeOut(600, function(){

                                // On transmet la valeur du timer au controleur pour calculer le score
                                var data_result = {
                                        timer : timer_width
                                        };
                                // Appel de la méthode Ajax de JQuery, pour transmettre nos données à notre controleur 
                                $.ajax({
                                    // url vers la méthode de chargement du nouvel environnement
                                    url: 'endGame',
                                    // Action de transmission des données (ici, on choisit 'POST', comme pour le formulaire)
                                    type: 'POST',
                                    // Protocole de communication avec le controleur (ici, on attend son retour avant de traiter la fonction de callback)
                                    async : false,
                                    // Données à transmettre et mises en forme précédemment
                                    data: data_result,
                                    success: function(msg) { // En cas de succès, on exécute ce qui suit (fonction de callback)
                                        // Insertion de la vue du nouvel environnement chargée par le controleur
                                        $('#content').html(msg);
                                        // Apparition progressive du nouvel environnement et lancement de la fonction de...
                                        $('#zone_result').fadeIn(2000);
                                    }
                                });
                            });
                        }
                        else{

                            $('#zone_interaction').fadeOut(600, function(){
                            // Chargement AJAX du nouvel environnement
                            var data_test = {
                                    environment : environment
                                    };

                                // Appel de la méthode Ajax de JQuery, pour transmettre nos données à notre controleur 
                                $.ajax({
                                    // url vers la méthode de chargement du nouvel environnement
                                    url: 'loadNewEnvironment',
                                    //url: "<?php echo site_url('reserve/AJAX_createCollection'); ?>",
                                    // Action de transmission des données (ici, on choisit 'POST', comme pour le formulaire)
                                    type: 'POST',
                                    // Protocole de communication avec le controleur (ici, on attend son retour avant de traiter la fonction de callback)
                                    async : false,
                                    // Données à transmettre et mises en forme précédemment
                                    data: data_test,
                                    success: function(msg) { // En cas de succès, on exécute ce qui suit (fonction de callback)
                                        // Insertion de la vue du nouvel environnement chargée par le controleur
                                        $('#zone_interaction').html(msg);

                                        // Apparition progressive du nouvel environnement et lancement de la fonction de...
                                        $('#zone_interaction').fadeIn(600, function(){
                                        // On rend draggable les items du nouvel environnement
                                        $('.item_draggable').draggable({disabled: false});

                                        // Fonction permettant de continuer à bénéficier des propriétés JQuery écrites dans ce script malgré un rechargement AJAX
                                        load_jquery_properties();
                                        });
                                    }
                                });
                            });
                        }
                    }
                });
            }
            // Si l'item n'est pas déposé au bon emplacement
            else{
                // 1. L'objet se repositionne à son emplacement dans la liste d'items
                // Récupération des coordonnées de dépose
                var current_position_left = $('#'+id_tmp).offset().left;
                var current_position_top = $('#'+id_tmp).offset().top;
                // On calcule le déplacement à faire
                var move_left = left_tmp - current_position_left;
                var move_top = top_tmp - current_position_top;

                // On repositionne l'objet à son emplacement grâce aux données calculées
                $("#"+id_tmp).animate({"left": "+="+move_left+"px", "top": "+="+move_top+"px"}, "slow");

                // 2. Si l'objet ne possède pas d'emplacement dans l'environnement, alors on le grise et on le barre
                var existence_emplacement = document.getElementById("empl_"+id_tmp);
                if(!existence_emplacement){
                    // On replace l'objet au bon emplacement et on charge une image grisée de cet objet
                    
                }
                // 2. Incrémentation de la jauge de temps
                animating = true;
                if((timer_width+30) < 450){
                    $('#timing').animate({
                        width: "+=30px"
                    }, 100, function(){
                        timer_width = timer_width+30;
                        animating = false;
                    });
                }
            }

            // Réinitialisation des variables mémorisant les informations de l'objet ayant été déplacé
            id_tmp='';
            top_tmp = 0;
            left_tmp = 0;

        });


            function detectIntersection(a, b){

                // Récupération des informations de taille de l'item
                var offset_a = $("#"+a).offset();
                var left_a = offset_a.left;
                var right_a = offset_a.left + $("#"+a).width();
                var top_a = offset_a.top;
                var bottom_a = offset_a.top + $("#"+a).height();

                var existence_b = document.getElementById(b);
                // Si l'emplacement existe
                if(existence_b){
                    // Récupération des informations de taille de l'emplacement de l'item
                    var offset_b = $("#"+b).offset();
                    var left_b = offset_b.left;
                    var right_b = offset_b.left + $("#"+b).width();
                    var top_b = offset_b.top;
                    var bottom_b = offset_b.top + $("#"+b).height();

                    // Tests indiquant s'il y a intersection entre les éléments
                    if(right_a < left_b)
                        return false;
                    if(left_a > right_b)
                        return false;
                    if(bottom_a < top_b)
                        return false;
                    if(top_a > bottom_b)
                        return false;

                    return true;
                }

                // SI l'emplacement n'existe pas
                else{
                     $('#'+id_tmp).draggable({disabled: true});
                     $('#'+id_tmp).removeClass('item_draggable');
                     
                }
            }
            
            
        }

        function replay_game(){
            $('#content').fadeOut(500, function(){
                window.location.href = 'index';
            });
        }

        function save_result(medal, game_id){

            var data_result = {
                medal : medal
                };

            $.ajax({
                // url vers la méthode de chargement du nouvel environnement
                url: 'saveResult',
                // Action de transmission des données (ici, on choisit 'POST', comme pour le formulaire)
                type: 'POST',
                // Protocole de communication avec le controleur (ici, on attend son retour avant de traiter la fonction de callback)
                async : false,
                // Données à transmettre et mises en forme précédemment
                data: data_result,
                success: function(msg) { // En cas de succès, on exécute ce qui suit (fonction de callback)
                    // Insertion de la vue du nouvel environnement chargée par le controleur
                    //$('#controller_callback').html(msg);
                    // Apparition progressive du nouvel environnement et lancement de la fonction de...
                    //$('#controller_callback').fadeIn(2000, function(){
                        $('#content').fadeOut(2000, function(){
                            window.location.href = '../home/index';
                        });
                    //});
                }
            });
        }
    